<nz-spin [nzSpinning]="isLoading">
  <div *ngIf="task">
    <nz-descriptions
      nzTitle="任务配置"
      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
      [nzExtra]="configActionTpl"
    >
      <nz-descriptions-item nzTitle="类名">{{ task.className }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="方法名">{{ task.methodName }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="方法参数">{{ task.methodParams }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="cron表达式">{{ task.cronExpression }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="状态">
        <nz-switch [ngModel]="task.enabled" nzCheckedChildren="启用" nzUnCheckedChildren="禁用" nzDisabled></nz-switch>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="备注">
        {{ task.remark }}
      </nz-descriptions-item>
    </nz-descriptions>

    <nz-alert
      nzType="warning"
      nzMessage="任务停止运行后，才能编辑，删除任务配置"
      nzShowIcon
      *ngIf="task.scheduled"
    ></nz-alert>

    <ng-template #configActionTpl>
      <nz-button-group>
        <button nz-button nzType="primary" (click)="deleteConfig()" nzDanger [disabled]="task.scheduled">
          <span nz-icon nzType="delete"></span>
          删除配置
        </button>
        <button nz-button nzType="primary" (click)="editConfig()" [disabled]="task.scheduled">
          <span nz-icon nzType="edit"></span>
          编辑配置
        </button>
      </nz-button-group>
    </ng-template>

    <nz-descriptions
      nzTitle="运行情况"
      [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
      [nzExtra]="monitorActionTpl"
      style="margin-top: 8px"
    >
      <nz-descriptions-item nzTitle="启动时间">{{
        task.startUpTime | date: 'yyyy-MM-dd HH:mm:ss'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="运行次数">{{ task.numOfRuns }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="异常次数">{{ task.numOfErrors }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="最后运行时间">
        {{ task.lastRunTime | date: 'yyyy-MM-dd HH:mm:ss' }}
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="运行总时长">{{ task.startUpTime | costTime }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="状态">
        <nz-tag nzColor="success" *ngIf="task.scheduled">已计划</nz-tag>
        <nz-tag nzColor="error" *ngIf="!task.scheduled">未计划</nz-tag>
      </nz-descriptions-item>
    </nz-descriptions>

    <ng-template #monitorActionTpl>
      <nz-button-group>
        <button nz-button nzType="primary" (click)="startTask()" [disabled]="task.scheduled">
          <span nz-icon nzType="step-forward"></span>
          启动任务
        </button>
        <button nz-button nzType="primary" (click)="stopTask()" [disabled]="!task.scheduled">
          <span nz-icon nzType="pause"></span>
          停止任务
        </button>
        <button nz-button nzType="primary" (click)="deleteLogs()" nzDanger>
          <span nz-icon nzType="delete"></span>
          删除日志
        </button>
      </nz-button-group>
    </ng-template>
  </div>
</nz-spin>
